<template>
	<!--主框架 -->
	<view class="frame">
		<!-- 轮播图 -->
		<view class="detail-image"><mosowe-swiper :autoplay="false" :height="465" :lists="image" :touchable="false" previewImage indicator="number"></mosowe-swiper></view>

		<!-- 内容主结构 -->
		<view class="detail-frame">
			<!-- 出售概述 -->
			<view class="frameContent">
				<view class="detail-outline">
					<view v-if="type == 0 || type == 1" class="outline-title">
						<text>{{ title }}</text>
					</view>
					<view v-if="type == 3" class="outline-title">
						<text>{{ residentialName }} - {{ region }}</text>
					</view>

					<!-- 标签 -->
					<view class="outline-tag" v-if="type == 0 || type == 1">
						<block v-for="(item, index) in sellLabels" :key="index">
							<text>{{ item }}</text>
						</block>
					</view>
					<!-- 价格 -->
					<view class="outline-info">
						<view class="info" v-if="type == 1">
							<text class="info-title">{{ price }}万元</text>
							<text class="info-tag">出售</text>
						</view>

						<view class="info" v-if="type == 0">
							<text class="info-title">{{ priceMonth }}元/月</text>
							<text class="info-tag">出租</text>
						</view>

						<view class="info" v-if="type == 0 || type == 1">
							<text class="info-title">{{ roomNum }}室{{ officeNum }}厅</text>
							<text class="info-tag">户型</text>
						</view>

						<view class="info" v-if="type == 0 || type == 1">
							<text class="info-title">{{ measure }}㎡</text>
							<text class="info-tag">面积</text>
						</view>

						<view class="info" v-if="type == 3">
							<text class="info-title">{{ priceAvg }}</text>
							<text class="info-tag">参考均价</text>
						</view>

						<view class="info" v-if="type == 3">
							<text class="info-title">{{ sellIng }}</text>
							<text class="info-tag">在售房源</text>
						</view>

						<view class="info" v-if="type == 3">
							<text class="info-title">{{ rentIng }}</text>
							<text class="info-tag">在租房源</text>
						</view>
					</view>
				</view>

				<!-- 房源信息 -->
				<view class="house-info" v-if="type == 1 || type == 0">
					<view class="info-left">
						<view v-if="type == 1">
							<text class="label">单价:</text>
							<text class="content">{{ unitPrice }}元/㎡</text>
						</view>

						<view>
							<text class="label">楼层:</text>
							<text class="content">{{ floor }}</text>
						</view>
						<view>
							<text class="label">梯户:</text>
							<text class="content">{{ louhu }}</text>
						</view>
						<view>
							<text class="label">小区:</text>
							<text class="content">{{ residentialName }}</text>
						</view>
					</view>

					<view class="info-right">
						<view>
							<text class="label">朝向:</text>
							<text class="content">{{ orientation }}</text>
						</view>

						<view>
							<text class="label">装修:</text>
							<text class="content">{{ renovation }}</text>
						</view>

						<view>
							<text class="label">面积:</text>
							<text class="content">{{ measure }}㎡</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 小区信息 -->
			<view class="frameContent">
				<view class="resident-info resident">
					<view class="info-tit"><text>小区信息</text></view>
					<view class="resident-frame">
						<view class="info-left">
							<view>
								<text class="label">建造年代:</text>
								<text class="content">{{ years }}</text>
							</view>
							<view>
								<text class="label">建筑类型:</text>
								<text class="content">{{ architectureType }}</text>
							</view>
							<view>
								<text class="label">绿化率:</text>
								<text class="content">{{ greeningRate }}</text>
							</view>
							
							
						</view>

						<view class="info-right line">
							<view>
								<text class="label">占地面积:</text>
								<text class="content">{{ residentialMeasure }}㎡</text>
							</view>

							<view>
								<text class="label">物业名称:</text>
								<text class="content">{{ propertyName }}</text>
							</view>

							<view>
								<text class="label">容积率:</text>
								<text class="content">{{ plotRatio }}</text>
							</view>
						</view>
					</view>
					<view v-if="type == 3" style="margin-top: 15upx;">
						<text class="label">详细地址:</text>
						<text class="content">{{ address }}</text>
					</view>
				</view>
			</view>

			<!-- 位置及周边 -->
			<view class="frameContent">
				<view class="resident-info resident">
					<view class="info-tit"><text>位置及周边</text></view>
					<view class="map-view">
						<map class="map" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" :callout="callout">
							<!-- 透明遮罩层：实现map禁止拖动 -->
							<cover-view class="cover-view" @click="showMap()">
								<cover-view class="container">
									<cover-view class="flex-wrp" style="flex-direction:row;"><cover-view class="flex-item demo-text-3"></cover-view></cover-view>
								</cover-view>
							</cover-view>
						</map>
					</view>
				</view>
			</view>

			<!-- 同小区其他二手房 -->
			<!-- 小区二手房 -->
			<view class="frameContent"  v-if="type == 1 || type == 3">
				<view class="resident-info resident">
					<view class="info-tit" v-if="type == 1"><text>同小区其他二手房</text></view>
					<view class="info-tit" v-if="type == 3"><text>小区二手房</text></view>

					<view class="publish-frame" v-if="noneFlag">
						<block v-for="(item, index) in secHouseArr" :key="index" v-if="index < sliceLength">
							<view class="publish-cata" @click="showDetailForSecHouse(item)">
								<view class="publish-img"><image :src="item.housing.imageInfoList[0].imagePath" mode="" class="img"></image></view>
								<view class="publish-title">
									<view class="title-primary">
										<text v-model="title">{{ item.title }}</text>
									</view>

									<view class="title-detail">
										<text v-model="region">{{ item.residential.region }}</text>
										<text v-model="measure">{{ item.housing.measure }}㎡</text>
										<text v-model="orientation">{{ item.housing.orientation }}</text>
									</view>

									<view class="title-tag">
										<block v-for="(itemLabel, index) in item.sellLabels" :key="index">
											<text>{{ itemLabel }}</text>
										</block>
									</view>

									<view class="title-pri">
										<text v-model="price">{{ item.housing.price }}万元</text>
										<text v-model="unitPrice">{{ item.housing.unitPrice }}元/平方</text>
									</view>
								</view>
							</view>
						</block>
						
						<view :class="type == 3 ? 'publish-More' : 'publish-more'" v-if="secHouseArr.length >= 3 && moreFlag" @click="showAll()">
							<text>查看更多{{ secHouseArr.length }}套二手房</text>
						</view>
						
						<view :class="type == 3 ? 'publish-More' : 'publish-more'" v-if="!moreFlag" @click="showless()"><text>折叠</text></view>
						
					</view>

					<view class="none" v-if="!noneFlag"><text>暂无数据</text></view>
				</view>
			</view>
			
			<!-- 租房推荐 -->
			<view class="frameContent"  v-if="type == 3 || type == 0">
				<view class="resident-info resident">
					<view class="info-tit" v-if="type == 3"><text>租房推荐</text></view>
					<view class="info-tit" v-if="type == 0"><text>同小区其他房源</text></view>
					
					<view class="publish-frame" v-if="rentNoneFlag">
						<block v-for="(item, index) in rentHouseArr" :key="index" v-if="index < sliceLength">
							<view class="publish-cata" @click="showDetailForRentHouse(item)">
								<view class="publish-img"><image :src="item.housing.imageInfoList[0].imagePath" mode="" class="img"></image></view>
								<view class="publish-title">
									<view class="title-primary">
										<text v-model="title">{{ item.title }}</text>
									</view>
					
									<view class="title-detail">
										<text v-model="region">{{ item.residential.region }}</text>
										<text v-model="measure">{{ item.housing.measure }}㎡</text>
										<text v-model="orientation">{{ item.housing.orientation }}</text>
									</view>
					
									<view class="title-tag" v-model="item.labels">
										<block v-for="(itemLabel, index) in item.sellLabels" :key="index">
											<text>{{ itemLabel }}</text>
										</block>
									</view>
					
									<view class="title-pri">
										<text v-model="price">{{ item.housing.priceMonth }}元/月</text>
									</view>
								</view>
							</view>
						</block>
						
						<view class="publish-more" v-if="rentHouseArr.length >= 3 && rentMoreFlag" @click="showRentAll()">
							<text>查看更多{{ rentHouseArr.length }}套租房</text>
						</view>
						
						<view class="publish-more less" v-if="!rentMoreFlag" @click="showRentless()"><text>折叠</text></view>
					</view>
			
					<view class="none" v-if="!rentNoneFlag"><text>暂无数据</text></view>
				</view>
			</view>

			<!-- 附近鹏邻门店 -->
			<view class="frameContent" style="height: 50upx;"></view>

			<!-- 关注&电话咨询 -->
			<view class="frameContent fav">
				<view class="fav-title xin" v-if="showFalg">
					<image src="../../../static/inster/ai.png" mode="" @click="aim('1')"></image>
					<text>关注</text>
				</view>

				<view class="fav-title xin" v-if="!showFalg">
					<image src="../../../static/inster/aired.png" mode="" @click="aim('2')"></image>
					<text>已关注</text>
				</view>

				<view class="fav-title phone" @click="call()">
					<image src="../../../static/inster/phone.png" mode=""></image>
					<text>电话咨询</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var { log } = console;
// 引入轮播组件】
import mosoweSwiper from '../../../components/mosowe-swiper/mosowe-swiper.vue';
import { publicing } from '../../../api/api.js';
// 引入请求地址
import { phone } from '../../../api/request.js';
import { getSecHouseUrl } from '../../../api/request.js';
import { insertFollowUrl } from '../../../api/request.js';
import { cancelFollowUrl } from '../../../api/request.js';
import { isFollowUrl } from '../../../api/request.js';
import { errdata } from '../../../api/errdata.js';
// 引入vuex的mapstate
import { mapState } from 'vuex';
// 解构console
var { log } = console;
// 定义数据库
var db = wx.cloud.database();
var users = db.collection('user');

export default {
	
	// 注册组件
	components: { mosoweSwiper },
	
	// 数据区
	data() {
		return {
			moreFlag: true,
			rentMoreFlag: true,
			sliceLength: 2,
			secHouseArr: [], // 同小区其他二手房数组
			
			rentHouseArr: [], // 同小区其他二手房数组
			listArr: [],
			showFalg: true, // 关注爱心 显示标识
			avatarUrl: '', // 用户头像
			nickName: '', // 用户昵称
			openid: '', // 用户openid
			image:[],
			imageInfoList1: [
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595935008527&di=d6255e65d883b32c758b1fe48921205f&imgtype=0&src=http%3A%2F%2Fcdnn.soufunimg.com%2Feimgn.jiatx.com%2Fjiancai%2F2009_03%2F06%2Fbj%2F1236308170093_000.jpg',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595935008525&di=e1f9f9129fe83a9d7cec91ec163f2622&imgtype=0&src=http%3A%2F%2Fimage1.js-jinhua.com%2Fuploadfile%2Fwx%2F2016%2F1112%2F58268690237ec.jpg'
			],
			imageInfoList:[],
			housingId: '', // 二手房/租房 房源ID
			title: '', // 出售标题
			sellLabels: [], // 标签
			price: '', // 总价
			roomNum: '', // 户型:室
			officeNum: '', // 户型:厅

			measure: '', // 面积
			// 房源信息
			unitPrice: '', // 单价
			floor: '', // 楼层
			louhu: '', // 梯户
			residentialName: '', // 小区
			orientation: '', // 朝向
			renovation: '', //装修
			// 小区信息
			years: '', // 建造年代
			architectureType: '', // 建筑类型
			greeningRate: '', // 绿化率
			residentialMeasure: '', // 占地面积
			propertyName: '', // 物业名称
			plotRatio: '', // 容积率
			type: '', // 类型0/出租 1/出售
			priceMonth: '', // 出租每月价格

			// 小区列表
			region: '', // 小区地区
			priceAvg: '', // 参考均价
			sellIng: '', // 在售
			rentIng: '', // 在租
			address: '', // 详细地址
			
			// 地图map
			latitude: '',
			longitude: '',
			scale: 13, 	//地图缩放程度
			covers: [
				{
					latitude: '',
					longitude: '',
					iconPath: '../../../static/inster/location.png',
					width: 30,
					height: 30,
					alpha: 0.5,

					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 3, //边框圆角
						bgColor: '#00c16f', //背景颜色
						display: 'ALWAYS', //常显
						padding: 2
					}
				}
			],
			noneFlag: true,
			rentNoneFlag: true,
			residentialId:'' // 小区id
		};
	},

	// 方法区
	methods: {
		
		// 按钮：点击地图
		showMap(){
			let obj = {
				// 经度
				longitude:this.longitude,
				// 维度
				latitude:this.latitude,
				// 小区名称
				residentialName:this.residentialName,
			};
			let objStr = JSON.stringify(obj);
			wx.navigateTo({
				url: '../adress/map?obj=' + objStr
			});
			
		},
		
		// 按钮：电话咨询
		call() {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},

		// 初始化: 二手房 > 获取同一小区下的二手房
		// 初始化: 小区 > 获取小区二手房
		// 初始化: 租房 > 获取同小区其他房源
		selectIdentHouseList() {
			let data
			// 0租房/1二手房/3小区
			if(this.type == 0 || this.type == 1){
				 data = {
					housingType: this.type,
					residentialName: this.residentialName
				};
				publicing(getSecHouseUrl, data)
					.then(res => {
						if (res.data.message == "获取数据为空") {
							this.noneFlag = false;
							this.rentNoneFlag = false;
						} else {
							this.listArr = res.data.data;
							if (this.listArr) {
								var index = this.listArr.findIndex(item => {
									// 0租房/1二手房
									if (item.housing.housingType == 1 && item.housing.housingId !== this.housingId) {
										this.secHouseArr.push(item);
									} 
									if (item.housing.housingType == 0 && item.housing.housingId !== this.housingId){
										this.rentHouseArr.push(item);
									}
								});
				
								if (JSON.stringify(this.secHouseArr) !== '[]') {
									// 该小区下超过一个房源的情况
									this.noneFlag = true;
								} else {
									// 该小区下只有一个房源的情况
									this.noneFlag = false;
								}
								if (JSON.stringify(this.rentHouseArr) !== '[]') {
									// 该小区下超过一个房源的情况
									this.rentNoneFlag = true;
								} else {
									// 该小区下只有一个房源的情况
									this.rentNoneFlag = false;
								}
							}
							log('获取的数据为:' + JSON.stringify(this.secHouseArr));
						}
					})
					.catch(err => {
						log(err);
					});
			}
			// 获取小区二手房
			if(this.type == 3){
				 data = {
					residentialName: this.residentialName,
					residentialId:this.residentialId
				};
				log("小区二手房data:"+JSON.stringify(data))
				
				publicing(getSecHouseUrl, data)
					.then(res => {
						if (res.data.message == '"获取数据为空"') {
							this.noneFlag = false;
							this.rentNoneFlag = false;
						} else {
							this.listArr = res.data.data;
							log("获取的数据为:"+JSON.stringify(this.listArr))
							if (this.listArr) {
								log("所有信息"+JSON.stringify(this.listArr))
								
								var index = this.listArr.findIndex(item => {
									// 0租房/1二手房
									if (item.housing.housingType == 1) {
										this.secHouseArr.push(item);
									} else {
										this.rentHouseArr.push(item);
										log("租房信息"+JSON.stringify(this.rentHouseArr))
									}
								});
								
								if(JSON.stringify(this.rentHouseArr) == '[]'){
									log("租房信息1111111111111"+JSON.stringify(this.rentHouseArr))
									this.rentNoneFlag = false;
								}
							}
							if(JSON.stringify(this.secHouseArr) == '[]'){
								this.noneFlag = false;
							}
							log(JSON.stringify(this.rentHouseArr))
							if(JSON.stringify(this.rentHouseArr) == '[]'){
								log("租房信息1111111111111"+JSON.stringify(this.rentHouseArr))
								
								this.rentNoneFlag = false;
							}
							log('获取的数据为:' + JSON.stringify(this.secHouseArr));
						}
					})
					.catch(err => {
						log(err);
					});
				
			}
		},

		// 方法:新增关注
		insertAim() {
			log(this.openid);
			log(this.housingId);
			let data
			if(this.type == 0 || this.type == 1){
				 data = {
					userId: this.openid,
					followId: this.housingId
				};
			}
			
			if(this.type == 3){
				 data = {
					userId: this.openid,
					followId: this.residentialId
				};
			}
			publicing(insertFollowUrl, data)
				.then(res => {
					if (res.data.message == '成功') {
						let errs = '关注成功';
						errdata.errlist(errs);
					} else {
						let errs = '关注失败';
						errdata.errlist(errs);
					}
				})
				.catch(err => {
					log(err);
				});
		},

		// 方法:取消关注
		cancleAim() {
			let data
			if(this.type == 0 || this.type == 1){
				 data = {
					userId: this.openid,
					followId: this.housingId
				};
			}
			
			if(this.type == 3){
				 data = {
					userId: this.openid,
					followId: this.residentialId
				};
			}
			// let data = {
			// 	userId: this.openid,
			// 	followId: this.housingId
			// };
			publicing(cancelFollowUrl, data)
				.then(res => {
					log(res);
					if (res.data.message == '成功') {
						let errs = '取消关注成功';
						errdata.errlist(errs);
					} else {
						let errs = '取消关注失败';
						errdata.errlist(errs);
					}
				})
				.catch(err => {
					log(err);
				});
		},

		// 关注、取消关注按钮 type 1/关注 2/取消关注
		aim(type) {
			// 请求数据库查看用户是否存在，存在就是登陆，反之未登录
			users
				.get()
				.then(res => {
					console.log(res);
					// length == 0说明用户没有登录
					if (res.data.length == 0) {
						let errs = '请先登录';
						errdata.errlist(errs);
					} else {
						console.log('已经登陆');
						this.showFalg = !this.showFalg;
						// 取到用户头像，昵称，openid
						this.openid = res.data[0]._openid;
						log('this.openid：' + this.openid);
						if (type == '1') {
							this.insertAim();
						}
						if (type == '2') {
							this.cancleAim();
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		
		// 按钮:跳转详情页面
		showDetailForSecHouse(item) {
			log(item);
			let obj = {
				housingId: item.housing.housingId,

				title: item.title,
				sellLabels: item.sellLabels,
				price: item.housing.price,
				roomNum: item.housing.roomNum,
				officeNum: item.housing.officeNum,
				measure: item.housing.measure,

				unitPrice: item.housing.unitPrice,
				floor: item.housing.floor,
				louhu: item.housing.louhu,
				residentialName: item.residential.residentialName,
				orientation: item.housing.orientation,
				renovation: item.housing.renovation,

				years: item.residential.years,
				architectureType: item.residential.architectureType,
				greeningRate: item.residential.greeningRate,
				residentialMeasure: item.residential.residentialMeasure,
				propertyName: item.residential.propertyName,
				plotRatio: item.residential.plotRatio,
				type: '1',
				
				longitude : item.residential.longitude,
				latitude : item.residential.latitude,
				// 房源图片集合
				imageInfoList:item.housing.imageInfoList
				
			};
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			wx.navigateTo({
				url: 'detail?obj=' + objStr
			});
		},
		showDetailForRentHouse(item) {
			log(item);
			let obj = {
				housingId: item.housing.housingId,
				priceMonth:item.housing.priceMonth,
				title: item.title,
				sellLabels: item.sellLabels,
				price: item.housing.price,
				roomNum: item.housing.roomNum,
				officeNum: item.housing.officeNum,
				measure: item.housing.measure,
		
				unitPrice: item.housing.unitPrice,
				floor: item.housing.floor,
				louhu: item.housing.louhu,
				residentialName: item.residential.residentialName,
				orientation: item.housing.orientation,
				renovation: item.housing.renovation,
		
				years: item.residential.years,
				architectureType: item.residential.architectureType,
				greeningRate: item.residential.greeningRate,
				residentialMeasure: item.residential.residentialMeasure,
				propertyName: item.residential.propertyName,
				plotRatio: item.residential.plotRatio,
				type: '0',
				
				longitude : item.residential.longitude,
				latitude : item.residential.latitude,
				// 房源图片集合
				imageInfoList:item.housing.imageInfoList
				
			};
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			wx.navigateTo({
				url: 'detail?obj=' + objStr
			});
		},
		
		// 按钮:显示所有记录
		showAll() {
			this.sliceLength = this.secHouseArr.length;
			this.moreFlag = false;
		},
		
		showRentAll() {
			this.sliceLength = this.rentHouseArr.length;
			this.rentMoreFlag = false;
		},
		
		// 按钮:折叠
		showless() {
			this.sliceLength = 2;
			this.moreFlag = true;
		},
		showRentless() {
			this.sliceLength = 2;
			this.rentMoreFlag = true;
		}
	},

	// 页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参数
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		log("9999999999999999999999999"+ JSON.stringify(objdata));
		this.housingId = objdata.housingId;
	
		this.title = objdata.title;
		this.sellLabels = objdata.sellLabels;
		this.price = objdata.price;
		this.roomNum = objdata.roomNum;
		this.officeNum = objdata.officeNum;
		this.measure = objdata.measure;
		this.unitPrice = objdata.unitPrice;
		this.floor = objdata.floor;
		this.louhu = objdata.louhu;
		this.residentialName = objdata.residentialName;
		this.orientation = objdata.orientation;
		this.renovation = objdata.renovation;
		this.years = objdata.years;
		this.architectureType = objdata.architectureType;
		this.greeningRate = objdata.greeningRate;
		this.residentialMeasure = objdata.residentialMeasure;
		this.propertyName = objdata.propertyName;
		this.plotRatio = objdata.plotRatio;
		this.type = objdata.type;
		this.priceMonth = objdata.priceMonth;
	
		this.region = objdata.region;
		this.priceAvg = objdata.priceAvg;
		log("mmmmmmmmmmmmmmmmmmmm"+objdata.sellIng)
		if(objdata.sellIng == 0){
			this.sellIng = '-'
		}else{
			this.sellIng = objdata.sellIng + '套';
		}
		if(objdata.rentIng == 0){
			this.rentIng = '-'
		}else{
			this.rentIng = objdata.rentIng + '套';
		}
		
		// this.sellIng = objdata.sellIng +'套';
		// this.rentIng = objdata.rentIng;
		
		this.address = objdata.address;
	
		this.longitude = objdata.longitude;
		this.latitude = objdata.latitude;
		this.residentialId = objdata.residentialId;
	
		this.covers[0].longitude = objdata.longitude;
		this.covers[0].latitude = objdata.latitude;
		this.covers[0].callout.content = objdata.residentialName;
		
		this.imageInfoList = objdata.imageInfoList;
		
		this.imageInfoList.findIndex(item => {
			this.image.push(item.imagePath);
		});
		
	},

	// 初始化函数
	mounted() {
		this.selectIdentHouseList();
	},
	
	// 页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
	onShow() {
		users
			.get()
			.then(res => {
				if (res.data.length == 0) {
					this.openid = '';
				} else {
					this.openid = res.data[0]._openid;
				}
				
				log("333333333:"+this.housingId)
				let data
				// 判断是0二手房/1租房还是3小区
				if(this.type == 0 || this.type == 1){
					 data = {
						userId: this.openid,
						followId: this.housingId
					};
				}
				if(this.type == 3){
					 data = {
						userId: this.openid,
						followId: this.residentialId
					};
				}
				
				publicing(isFollowUrl, data)
					.then(res => {
						log(res);
						if (res.data.message == '成功') {
							this.showFalg = false;
						} else {
							this.showFalg = true;
						}
					})
					.catch(err => {
						log(err);
					});
			})
			.catch(err => {
				console.log(err);
			});
	}
};
</script>

<style>
/* 主框架 */
.frame {
	background-color: #f9f9f9;
}
/*轮播图  */
.detail-image {
	width: 100%;
	height: 465upx;
}
/* 内容主结构 */
.detail-frame {
	background-color: #f9f9f9;
}
.frameContent {
	padding: 0 30upx;
	background-color: #ffffff;
}
/* 概要信息 */
.detail-outline {
	padding-top: 40upx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}
.outline-title {
	display: flex;
	flex-wrap: wrap;
}
.outline-title text {
	font-size: 35upx;
	font-weight: bold;
}
.outline-tag {
	padding: 15upx 0;
	display: flex;
	align-items: center;
}
.outline-tag text {
	background-color: #f2f0ee;
	font-size: 25upx;
	padding: 0 10upx;
	margin: 5upx 15upx 35upx 0;
	border-radius: 5upx;
	color: #a6a6a6;
}
.outline-info {
	margin-top: 20upx;
	display: flex !important;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 40upx;
	border-bottom: 1px solid #f0f0f0;
}
.info {
	width: calc((100% / 3) - 5upx) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid #f0f0f0;
}
.outline-info view:last-child {
	border-right: none;
}
.info-title {
	font-size: 35upx;
	color: #ef8614 !important;
}
.info-tag {
	font-size: 25upx;
	color: #a6a6a6;
}
/* 房源信息 */
.house-info {
	padding-bottom: 30upx;
	display: flex;
	background-color: #ffffff;
}
.info-left {
	display: flex;
	flex-direction: column;
}
.info-left view {
	padding: 15upx 0;
}
.info-right {
	margin-left: 90upx;
	display: flex;
	flex-direction: column;
}
.info-right view {
	padding: 15upx 0;
}
.label {
	font-size: 30upx;
	color: #a6a6a6;
}
.content {
	margin-left: 20upx;
	font-size: 30upx;
	color: #3f3f3f;
}
/* 小区信息 */
.resident-info {
	background-color: #ffffff;
	margin-top: 20upx;
}
.info-tit {
	font-size: 35upx;
	font-weight: bold;
}

.resident-frame {
	display: flex;
}
.resident {
	padding: 30upx 0;
}

.map-view {
	margin-top: 20upx;
	margin-bottom: -2upx;
	width: 100%;
	height: 300upx;
	border-radius: 20upx;
}
.map {
	width: 100%;
	height: 300upx;
	border-radius: 20upx;
}

/* 二手房列表展示 */
.publish-frame {
	margin: 20upx 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.publish-cata {
	width: 100%;
	display: flex;
	margin-bottom: 20upx;
}
.publish-img {
	width: 200upx !important;
	height: 200upx;
}
.img {
	width: 200upx !important;
	height: 100%;
	border-radius: 20upx;
}
.publish-title {
	margin-left: 20upx;
	display: flex;
	flex-direction: column;
}
.title-primary {
	font-size: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.title-detail {
	margin: 10upx 0 10upx -10upx;
	font-size: 25upx;
	color: #666666;
	display: flex;
	flex-direction: row !important;
}
.title-detail text {
	padding: 0 10upx;
	border-right: 1px solid #000000;
}
.title-detail text:last-child {
	border-right: none;
}
.title-tag {
	padding: 10upx 0;
	height: 50upx;
	display: flex;
	align-items: center;
}
.title-tag text {
	background-color: #f2f0ee;
	font-size: 25upx;
	padding: 0 10upx;
	margin: 5upx 15upx 35upx 0;
	border-radius: 5upx;
	color: #7b6850;
}
.title-pri {
	display: flex;
	align-items: flex-end;
}
.title-pri text:nth-child(1) {
	font-size: 30upx;
	color: #6f8ac3;
	font-weight: bold;
	margin-right: 5upx;
}
.title-pri text:nth-child(2) {
	font-size: 20upx;
	color: #666666;
}
.publish-more {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background-color: #f9f9f9;
	height: 70upx;
	margin-bottom: 48upx;
	border-radius: 20upx;
}
.publish-More {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background-color: #f9f9f9;
	height: 70upx;
	margin-bottom: -13upx;
	border-radius: 20upx;
}

.publish-More text {
	font-size: 30upx;
	line-height: 50upx;
	text-align: center;
	color: #6f8ac3;
}

.publish-more text {
	font-size: 30upx;
	line-height: 50upx;
	text-align: center;
	color: #6f8ac3;
}

/* 关注&电话咨询 */
.fav {
	height: 120upx;
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.fav-title {
	height: 75upx;
	line-height: 75upx;
	margin: 20upx 0;
	border: 1px solid #c8c8c8;
	border-radius: 20upx;
	width: 47%;
}
.fav-title text {
	height: 75upx;
	line-height: 75upx;
}
.xin {
	display: flex;
	align-items: center;
}
.xin image {
	margin-left: 60upx;
	width: 40upx !important;
	height: 40rpx !important;
	display: block;
}
.xin text {
	margin-left: 30upx;
	font-size: 30upx;
	color: #000000;
	height: 75upx;
	line-height: 75upx;
}

.phone {
	background-color: #f28c23;
	display: flex;
	align-items: center;
}
.phone image {
	margin-left: 60upx;
	width: 40upx !important;
	height: 40upx !important;
	display: block;
}
.phone text {
	margin-left: 30upx;
	font-size: 30upx;
	color: #ffffff;
	height: 75upx;
	line-height: 75upx;
}
.none {
	height: 100upx;
	margin-bottom: 10upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.none text {
	height: 80upx;
	line-height: 80upx;
	font-size: 25upx;
	color: #cccccc;
}

.cover-view {
	position: absolute;
	top: calc(50% - 150rpx);
	/* left: calc(50% - 300rpx); */
	/* opacity: .7; */
	width: 100%;
}

.flex-wrp {
	display: flex;
	width: 100%;
}

.flex-item {
	width: 100%;
	height: 300rpx;
	font-size: 26rpx;
}

.demo-text-1 {
	background: rgba(26, 173, 25, 0.7);
}

.demo-text-2 {
	background: rgba(39, 130, 215, 0.7);
}

.demo-text-3 {
	/* background: rgba(255, 255, 255, 0.7); */
	background: transparent;
}
</style>
